import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import Typography from '@/pages/OrderModule/common/components/Typography';
import CommonLoading from '@/components/CommonLoading';
import { useEffect, useState } from 'react';
import { countOrderSum } from '../../utils/checkOrderConfig';
import { updateOrderStatus } from '../../utils/orderStatus';

/** 取消作废订单 */
function CancelVoidOrderModal(props) {
	const { item, selectKeys, orderList, handleOk, handleCancel } = props;
	const { scene } = item;
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);

	const [open, setOpen] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, [])

	const onOk = () => {
		setLoading(true);
		updateOrderStatus(scene, {
			orderIds: selectKeys,
		}, (val) => {
			setLoading(false);
			if (val) {
				setIsOk(true);
				setOpen(false);
			}
		})
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			handleOk()
		} else {
			handleCancel();
		}
	}

	//已作废订单
	const orderCount = countOrderSum(scene, selectKeys, orderList);


	return (
		<CommonModal title="取消作废订单" afterClose={afterClose} open={open} width="360px" onOk={onOk} onCancel={onCancel}>
			<div style={{ color: '#333' }}>
				<div>
					已作废：<Typography type="error">{orderCount}</Typography>
				</div>
				<div style={{ marginTop: 10 }}>是否确认对这些订单取消作废？</div>
			</div>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default CancelVoidOrderModal;
